<template>
  <div class='loginFormDiv'>
    <el-container>
      <el-main>
        <el-form class="login-form"   label-width="100px">
          <el-form-item label="用户名">
            <el-input size="large" v-model="user_name" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input size="large" v-model="password" placeholder="请输入密码" type="password" show-password />
          </el-form-item>
          <el-form-item label="角色">
            <el-radio-group v-model="role">
              <el-radio label="用户" />
              <el-radio label="管理员" />
              <el-radio label="商家" />
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doLogin">登陆</el-button>
            <el-button type="primary" @click="router.push('/register')">注册</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import {store} from '@/common/store'
import { ref, reactive, inject } from "vue"
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'


const user_name = ref("")
const password = ref("")
const role = ref("")
const router = useRouter()

async function doLogin() {
  const params = {
    user_name: user_name.value,
    password: password.value,
    role: role.value
  }
  try {
    // 使用await等待登录API请求完成
    const { data } = await axios.get("/tUsers/login", { params })
    // 打印响应数据用于调试
    console.log(data)

    // 处理登录成功的逻辑
    if (data.code === 200) {
      store.logined = true
      store.userinfo = {
        id: data.data.id,
        username: data.data.username,
        name: data.data.name
      }
      store.token = data.data.token
      sessionStorage.setItem("token", store.token)
      sessionStorage.setItem("userinfo", JSON.stringify(store.userinfo))
      ElMessage.success("登录成功")
      
      // 根据角色跳转到不同页面
      const targetRoute = role.value === "管理员" ? "/index/admin" : 
                        role.value === "商家" ? "/index/products" : "/"
      router.push(targetRoute)
    } else {
      // 处理登录失败的逻辑
      ElMessage.error(data.message || "用户名或密码错误")
      password.value = ""
    }
  } catch (error) {
    // 捕获并处理登录时的异常
    console.error("登录失败:", error)
    ElMessage.error("登录失败，请稍后再试")
    password.value = ""
  }
}
</script> 
<style scoped>
  
  .loginFormDiv{
    max-width: 100%;
    background-image: url('@/assets/images/dog-1850465.jpg'); 
    background-size: cover; 
    background-position: center; 
    min-height: 825px; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    margin-top: -50px;
  }
  .login-form{
    margin: auto;
    width: 400px;
    height: auto;
    background-color: rgb(0,0,0,0.5);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px #999;
    margin-top: 200px;
  }

  /* 用户名和密码输入框样式 */
  .login-form :deep(.el-form-item__label) {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
  }
  
  .login-form :deep(.el-input) {
    width: 100%;
  }
  
  .login-form :deep(.el-input__wrapper) {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  
  .login-form :deep(.el-input__inner) {
    color: #333;
    font-size: 14px;
  }
  
  .login-form :deep(.el-input__inner::placeholder) {
    color: #999;
  }
</style>